<template>
    <div class="container">
      <div class="tips-title">1.基本用法</div>
      <el-alert type="info" title="消息提示的文案" ></el-alert><br>
      <el-alert type="success" show-icon title="成功提示的文案 显示图标 show-icon"></el-alert><br>
      <el-alert type="warning" show-icon center title="警告提示的文案 文字居中 center"></el-alert><br>
      <el-alert type="error" show-icon title="错误提示的文案" show-icon></el-alert>
      <div class="tips-title">2.主题 <span class="tips-explain">effect="(null)/dark",两个不同的主题：light(默认) 和 dark</span></div>
      <el-alert title="成功提示的文案" effect="dark" type="success"></el-alert><br>
      <el-alert title="消息提示的文案" effect="dark" type="info"></el-alert><br>
      <el-alert title="警告提示的文案" effect="dark" type="warning"></el-alert><br>
      <el-alert title="错误提示的文案" effect="dark" type="error"></el-alert>
      <div class="tips-title">3.自定义关闭按钮</div>
      <el-alert title="不可关闭的 alert :closable='false'" type="success" :closable="false"></el-alert><br>
      <el-alert title="自定义 close-text" type="info" close-text="知道了"></el-alert><br>
      <el-alert title="设置了回调的 alert" type="warning" @close="closeAlert3"></el-alert>
      <div class="tips-title">4.带有辅助性文字介绍 /带有 icon 和辅助性文字介绍 </div>
      <el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert><br>
      <el-alert show-icon title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert><br>
    </div>
</template>
<script>
  export default {
    name: 'no-alert',
    data() {
      return {}
    },
    methods: {
      closeAlert3(){
        console.log("close");
      }
    }
  }
</script>
<style>
</style>

